<template>
  <div class="login">
    <full-loading :show="fullLoading" :text="loadingText" />
    <div class="login-component-layout">
      <full-loading :show="partLoading" text="重置中" />
      <p class="m-t-10">用户名:admin 密码:111111</p>
      <a-form
        class="m-t-10"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        :model="formInline"
        @submit="handleSubmit"
      >
        <a-form-item 
          label="用户名" 
          :required="true"
          :label-col="labelCol" 
          :wrapper-col="wrapperCol"
          :validate-status="formInline.username==''?'error':'success'"
        >
          <a-input 
            type="text" allow-clear
            v-model:value="formInline.username" 
          />
        
        </a-form-item>
        <a-form-item
          label="密码" 
          :required="true"
          :label-col="labelCol" 
          :wrapper-col="wrapperCol" 
          :validate-status="formInline.password==''?'error':'success'"
        >
          <a-input 
            type="password" allow-clear
            v-model:value="formInline.password" 
          />
        </a-form-item>
        <a-form-item
          class="text-left" 
          :wrapper-col="{ offset: 4, ...wrapperCol }"
        >
          <a-button 
            type="primary" 
            htmlType="submit"
            class="m-r-10"
          >登录</a-button>

          <a-button 
            type="default"
            @click="handleReset"
          >重置</a-button>

        </a-form-item>
      </a-form>

    </div>
  </div>
</template>

<script lang="ts">
import { 
  computed, 
  defineComponent, 
  reactive, 
  toRefs, 
  onMounted
} from 'vue'
import { useRouter } from 'vue-router';
import FullLoading from '@/components/global/FullLoading.vue'
import { useStore } from 'vuex'
import { setStoreState } from '@/store/utils'
import { StateType } from '@/@types'
import { AppConfig } from '@/config/app'
const { log, info, warn, error } = console;

export default defineComponent({
  name: 'Login',
  props: {},
  setup() {
    const app = computed(() => store.state.app)
    const router = useRouter();
    const store = useStore<StateType>()
    const fullLoading = computed(() => store.state.app.fullLoading)
    const loadingText = computed(() => store.state.app.loadingText)

    let state = reactive({
      labelCol: { span: 4 },
      wrapperCol: { span: 20 },
      formInline:{
        username: 'admin',
        password: '111111'
      },
      fullLoading,
      partLoading: false,
    });

    // 模拟延时
    const delay = async (ms = 200) => {
      await new Promise((r) => setTimeout(r, ms));
    }

    // 完成表单
    const handleSubmit = (e:any) => {
      e.preventDefault();
      if( state.formInline.username == 'admin' && state.formInline.password == '111111' ){
        
        doLogin();
      }else{
        AppConfig.$message.error('error');
      }
    }

    // 点击登录
    const doLogin = async () => {
      setStoreState('app', 'loadingText', 'Now Loading ...')
      setStoreState('app', 'fullLoading', true);
      // 调用延时
      await delay(2000);
      setStoreState('app', 'fullLoading', false);
      setStoreState('user', 'token', 'c2acd2162d2f11ea9c2cc80aa95ba6a2');
      setStoreState('user', 'userDetail', {
        username: 'admin',
        userId: 1001
      });
      router.push({
        path:'home'
      });
      AppConfig.$message.success({content:'success',duration:1});
    };

    // 点击重置
    const handleReset = async () => {
      state.partLoading = true;
      // 调用延时
      await delay(1000);
      state.partLoading = false;
      state.formInline.username = 'admin';
      state.formInline.password = '111111';
    }

    return {
      handleReset,
      handleSubmit,
      loadingText,
      ...toRefs(state)
    }

  },
  components: {
    FullLoading
  }
})

</script>

<style lang="scss" scoped>
.login{
  height: 100%;
  position: relative;
  &-component-layout{
    background-color: #fff;
    padding: 20px;
    box-shadow: 0px 0px 25px 0px rgba(0, 0, 0,.1);
    border-radius: 5px;
    width: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -80%);
    ::v-deep .ant-form-item-label > label::after{
      content: '';
    }
  }
  
}

</style>
